<template>
  <div class="news-types" v-if="channels.length > 0">
    <div
      class="item"
      v-for="item in showChannels"
      :key="item.channelsId"
      :class="{
        active: item.channelId === chooseId,
      }"
      @click="switchTo(item.channelId)"
    >
      {{ item.name }}
    </div>
    <a href="" @click.prevent="isCollapse = !isCollapse">{{
      isCollapse ? '展开' : '收起'
    }}</a>
  </div>
</template>

<script>
// import { getNewsChannels } from '@/services/newsService'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      // channels: [],
      isCollapse: true, // 当前是否为折叠状态
      chooseId: null // 当前选中的频道id
    }
  },
  computed: {
    ...mapState('channels', ['channels']),
    // 需要显示的频道
    showChannels () {
      if (this.isCollapse) {
        // 折叠状态
        return this.channels.slice(0, 8) // 折叠状态只需要显示8个频道
      } else {
        // 展开状态
        return this.channels
      }
    }
  },
  // async created () {
  //   var res = await getNewsChannels()
  //   this.channels = res
  //   // 默认选中第一个频道
  //   this.switchTo(this.channels[0].channelId)
  // },
  watch: {
    channels: {
      immediate: true,
      handler () {
        if (this.channels.length > 0) {
          this.switchTo(this.channels[0].channelId)
        }
      }
    }
  },
  methods: {
    // 切换chooseId
    switchTo (id) {
      this.chooseId = id
      // 我知道我的频道被切换了,但我不知道切换后要干嘛?
      // 触发一个事件, 让组件的使用者(父组件)去搞定这个事
      this.$emit('chanChange', this.chooseId)
    }
  }
}
</script>

<style lang="scss" scoped>
.news-types {
  margin: 30px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding-bottom: 15px;
  a {
    align-self: flex-end;
    margin-bottom: 20px;
    color: #409eff;
  }
}
.item {
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 7px 15px 7px 0;
  cursor: pointer;
  position: relative;
  &:hover {
    background: #ccc;
  }
  &.active {
    background: #000;
    color: #fff;
  }
}
</style>
